<template>
  <Resizeable :driver="2" :leftWidthLimit="{ min: 370, max: 900 }">
    <template #left>
      <SearchBlock @doSearch="conditionhandler" @changeModel="changeModel">
      </SearchBlock>
      <div class="listWrapper">
        <template v-if="roomStore.commentList.length > 0">
          <List
            :list="roomStore.commentList"
            :finished="finished"
            :watch="true"
            @visible-items-change="loadRecords"
          >
            <template #item="{ item }">
              <CommentUserItem
                :key="item.id"
                :comment="item"
                :class="{ active: roomStore.currentChatRoomInfo.id == item.id }"
                @click="doComment(item)"
              />
            </template>
          </List>
        </template>
        <template v-else>
          <Empty
            image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
            :image-style="{ height: '60px' }"
            class="emptyContainer"
          >
            <template #description>
              
            </template>
          </Empty>
        </template>
      </div>
    </template>
    <template #right>
      <div class="rightContent">
        <CommonHeader>
          <div class="chatHeader">
            <template v-if="roomStore.currentChatRoomInfo.id!=0">
              <h3>{{ roomStore.currentChatRoomInfo.roomName }}</h3>
              <div class="menu" @click="showUserMenu">
                <div class="menuItem"></div>
                <div class="menuItem"></div>
                <div class="menuItem"></div>
              </div>
            </template>
          </div>
        </CommonHeader>
        <template v-if="roomStore.currentChatRoomInfo.id!=0">
          <ChatContent />
        </template>
        <template v-if="roomStore.currentChatRoomInfo.id==0">
          <div class="empty">
            <WechatFilled />
          </div>
        </template>
      </div>
    </template>
  </Resizeable>
  <Loading v-if="chatStore.loadingRecord" title="导入聊天记录中..." />
</template>
<script lang="ts" setup>
// 导入工具库
import { reactive, ref, onMounted, toRef } from 'vue'
import { chatRoomList, allChatRecords } from '@/lib/api'
import Pubsub from 'pubsub-js'
import { queryChatRooms, insertChatRooms, insertChatRecords } from '@/utils/Electron'
import useChatStore from '@/stores/chatStore'
import useRoomStore from '@/stores/roomStore'
const chatStore = useChatStore()
const roomStore = useRoomStore()
// 导入组件库
import Resizeable from '@/components/custom/Resizeable/index.vue'
import { LoadingOutlined } from '@ant-design/icons-vue'
import { Empty } from 'ant-design-vue'
import Loading from '@/components/custom/Loading/index.vue'
import CommentUserItem from '@/components/CommentUserItem.vue'
import List from '@/components/custom/List/index.vue'
import ChatContent from '@/components/ChatContent.vue'
import SearchBlock from '@/components/SearchBlock.vue'
import CommonHeader from '@/components/CommonHeader.vue'
import { WechatFilled } from '@ant-design/icons-vue'
// 定义属性
const commentList = ref([])
const finished = ref<Boolean>(true)
const loadingRecord = ref<Boolean>(false)
const condition = ref('')

// 定义方法
const conditionhandler = (data: any) => {
  condition.value = data.value
}
// 显示用户菜单
const showUserMenu = (e) => {
  e.stopPropagation()
  PubSub.publish('showExtraInfo', { })
}
// 选中聊天房间
const doComment = (comment: any) => {
  const info = { id: comment.id, roomName: comment.name, avatar: comment.avatar }
  roomStore.setCurrentChattingRoomInfo(info)
  // chatStore.stateSync()
}

// 加载当前视窗内聊天房间的前20条聊天记录
const loadRecords = (list: Array<Text>) => {
  chatStore.setChatRecordList(list)
}

// 初始化函数
onMounted(() => {
  window.api.on('main-load-records', (eventA: any, msg: any) => {
    //initChatData()
  });
  // 监听筛选事件
  Pubsub.subscribe('filter-comments', (msg: any) => {
    
  })
})
</script>
<style lang="less" scoped>
.loadMore {
  width: 100%;
  text-align: center;
  height: 60px;
  line-height: 60px;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e6e6e6;
}
.listWrapper {
  overflow: auto;
  flex: 1;
  background-color: #f1f1f1;
  .emptyContainer {
    height: 400px;
    width: 100%;
    display: flex;
    justify-content: center;

    flex-direction: column;
  }
}

.chatHeader {
  width: 97%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  h3 {
    font-weight: 500;
    color: #000;
  }
  .menu {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    padding-bottom: 2%;
    .menuItem {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background-color: #6d6d6d;
    }
  }
}
.rightContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;
  .empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    color: #e9e9e9;
  }
}
</style>
